<template>
    <div class="outbox">
        <div :class="ani ? 'ani inbox' : 'inbox'">
            <div v-if="number === '.'">.</div>
            <div v-else v-for="index in 10" :key="index">{{ index - 1 }}</div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
interface prop {
    number: string
    time?: string
    size?: number
}

const props = withDefaults(defineProps<prop>(), {
    time: '1s',
    size: 22
})
const ani = ref(false)
const num = computed(() => '-' + (parseInt(props.number) * props.size) + 'px')
const s = computed(() => props.size + 'px')
onMounted(() => {
    setTimeout(() => {
        ani.value = true
    }, 100);
})
</script>

<style scoped>
.outbox {
    height: v-bind(s);
    overflow: hidden;
}

.inbox {
    line-height: v-bind(s);
    transition: transform v-bind(time);
}

.inbox.ani {
    transform: translateY(v-bind(num));
}
</style>